<link rel="stylesheet" href="ccay/example/demo.css"  

type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-

8"></script>
<script type="text/javascript" src="ccay/example/ui/igrid/editorFunction.js" 

charset="utf-8"></script>
<style type="text/css">
h5{font-size: 13px; font-weight: normal; line-height: 23px; float: right;}
h6{font-size: 13px; color: red; float: left; line-height: 13px;}
.showClew{font-size: 12px; color: olive;}
.showClew span{color: peru;}
.spanShow{color: peru;}
</style>
<div id="editorFunctionDemo">
	<!-- API区 -->
	 <div title='API' tabid='tab1'><br />
	 	<h2 style="cursor: pointer;"><a onclick="Ccay.Common.toggle

(this,'#api1')">1.IGrid编辑器editorOp属性配置表</a></h2>
		<div style="display:none" id="api1">
			<form class="init ccay-form">
			<div class="ccay-form-body ccay-form-custom">
				<ul>
					<li class="ccay-form-row">
						<samp><h3>相关API</h3></samp>
						<span class="ccay-form-input"><h3 

style="float: left;">描述</h3><h5><a 

onclick="Ccay.example.ui.igrid.editorFunction.openDemo('tab2');">点击查看

Demo</a></h5></span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" 

i18nKey="id"></samp>	
						<span class="ccay-form-input">

{String} 设置该列的编辑器的id值</span>	
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" 

i18nKey="cssName"></samp>	
						<span class="ccay-form-input">

{String} 设置该列的编辑器的样式，默认为:'grid-editor'</span>	
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" 

i18nKey="field"></samp>	
						<span class="ccay-form-input">

{String} 设置该列的编辑器的name值，默认为columns的field值</span>	
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" 

i18nKey="type"></samp>	
						<span class="ccay-form-input">

{String} 设置该列的编辑器的类型，默认为columns的type值</span>	
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" 

i18nKey="format"></samp>	
						<span class="ccay-form-input">

{Object} 设置该列的编辑器的格式化，默认为columns的format值</span>	
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" 

i18nKey="rule"></samp>	
						<span class="ccay-form-input">

{Object} 设置该列的编辑器的默认验证，默认为columns的rule值</span>	
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" 

i18nKey="trigger"></samp>	
						<span class="ccay-form-input">

{Array} 设置该列的编辑器进行联动的其他列的编辑器</span>	
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" 

i18nKey="afterTrigger"></samp>	
						<span class="ccay-form-input">

{Array} 设置该列的联动之后显示的编辑器</span>	
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" 

i18nKey="valid"></samp>	
						<span class="ccay-form-input">

{Boolean} 设置该列编辑器是否启用验证</span>	
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" 

i18nKey="conf"></samp>	
						<span class="ccay-form-input">

{Object} 设置该列的编辑器的参数设置</span>	
					</li>
				</ul>
			</div>
		</div><br />
	 	
	 	<h2 style="cursor: pointer;"><a onclick="Ccay.Common.toggle

(this,'#api2')">2.IGrid内置编辑器type属性配置表</a></h2>
		<div style="display:none" id="api2">
			<form class="init ccay-form">
			<div class="ccay-form-body ccay-form-custom">
				<ul>		
					<li class="ccay-form-row">
						<samp><h3>内置类型</h3></samp>
						<span class="ccay-form-input"><h3 

style="float: left;">描述</h3><h5><a 

onclick="Ccay.example.ui.igrid.editorFunction.openDemo('tab3');">点击查看

Demo</a></h5></span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" 

i18nKey="bool/checkbox"></samp>	
						<span class="ccay-form-input">设置

该列的编辑模式是复选框模式。<br><h6>示例:columns:[{type: 'bool'}];或者columns:

[{editorOp:{type:'checkbox'}}];</h6>// 若该类型在type属性中存在，则直接配置为

columns的type属性，否则该类型配置在editorOp的type属性中</span>	
					</li>	
					<li class="ccay-form-row">
						<samp class="i18n" 

i18nKey="textarea/longtext"></samp>	
						<span class="ccay-form-input">设置

该列的编辑模式是文本域模式。<br><h6>示例:columns:[{editorOp:{type:'textarea', 

width:"50px", height:"50px"}}];</h6><br>
							editorOp:{Object} 在columns

属性中配置，对该列所显示的编辑模式进行设置
							<div class="ccay-form-

body">
	                           	<ul></ul>
	                        </div>
							<div class="ccay-form-

custom">
								<ul>
									<li 

class="ccay-form-row">
		                        		<samp class="i18n" 

i18nKey="width"></samp>
										

<span class="ccay-form-input">{String} 设置编辑模式文本域的宽度</span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" 

i18nKey="height"></samp>
										

<span class="ccay-form-input">{String} 设置编辑模式文本域的高度，默认50px</span>
			                		</li>
			                	</ul>
			                </div>
						</span>	
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" 

i18nKey="datetime/date"></samp>	
						<span class="ccay-form-input">设置

该列的编辑模式是日期或者日期时间模式。<br><h6>示例:columns:[{type:'datetime', 

editorOp:{wmindate:"1990-01-01 00:00:00", wmaxdate:"2020-01-01 00:00:00", dblmonth: 

true}}];或者columns:[{type:'date', editorOp:{wmindate:"1990-01-01", wmaxdate:"2020

-01-01", dblmonth:false}}];</h6><br>
							editorOp:{Object} 在columns

属性中配置，对该列所显示的编辑模式进行设置
							<div class="ccay-form-

body">
	                           	<ul></ul>
	                        </div>
							<div class="ccay-form-

custom">
								<ul>
									<li 

class="ccay-form-row">
		                        		<samp class="i18n" 

i18nKey="wmindate"></samp>
										

<span class="ccay-form-input">{String} 设置编辑模式日期可选范围的最小值</span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" 

i18nKey="wmaxdate"></samp>
										

<span class="ccay-form-input">{String} 设置编辑模式日期可选范围的最大值</span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" 

i18nKey="dblmonth"></samp>
										

<span class="ccay-form-input">{Boolean} 设置编辑模式是否是双月日期，默认为

false</span>
			                		</li>
								</ul>
							</div>
						</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" 

i18nKey="enum/combobox"></samp>	
						<span class="ccay-form-input">设置

该列的编辑模式是下拉框模式。<br><h6>示例:columns:[{type:'enum'}];或者columns:

[editorOp:{type:'combobox', conf:{connector: '#id'}}}];</h6><br>
							editorOp:{Object} 在columns

属性中配置，对该列所显示的编辑模式进行设置
							<div class="ccay-form-

body">
	                           	<ul></ul>
	                        </div>
							<div class="ccay-form-

custom">
								<ul>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" 

i18nKey="conf"></samp>
										

<span class="ccay-form-input">{Object} 设置编辑模式下拉框的属性配置，具体配置将在

《选择组件->丰富选择组件》中描述
											

<h5><a onclick="Ccay.Page.forward

('ccay/example/demo/ui/dropdown/richSelect.html');">点击查看</a></h5>
										

</span>
			                		</li>
								</ul>
							</div>
						</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" 

i18nKey="lookup"></samp>	
						<span class="ccay-form-input">设置

该列的编辑模式是lookup模式。<br><h6>示例:columns:[{type:'lookup'}];</h6><br></span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" 

i18nKey="rate"></samp>	
						<span class="ccay-form-input">设置

该列的编辑模式是比率模式。<br><h6>示例:columns:[{type:'rate'}];</h6><br></span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" 

i18nKey="suggest"></samp>	
						<span class="ccay-form-input">设置

该列的编辑模式是联想框模式。<br><h6>示例:columns:[{editorOp:{type:'suggest', conf:

{multi: true}}}];</h6><br>
							editorOp:{Object} 在columns

属性中配置，对该列所显示的编辑模式进行设置
							<div class="ccay-form-

body">
	                           	<ul></ul>
	                        </div>
							<div class="ccay-form-

custom">
								<ul>
									<li 

class="ccay-form-row">
		                        		<samp class="i18n" 

i18nKey="conf"></samp>
										

<span class="ccay-form-input">{Object} 设置编辑模式联想框的属性配置，具体配置将在

《选择组件->Suggest联想框》中描述
											

<h5><a onclick="Ccay.Page.forward('ccay/example/demo/ui/suggest/suggest.html');">

点击查看</a></h5>
										

</span>
			                		</li>
								</ul>
							</div>
						</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" 

i18nKey="hrdept"></samp>	
						<span class="ccay-form-input">设置

该列的编辑模式是部门选择框模式。<br><h6>示例:columns:[{editorOp:

{type:'hrdept'}}];</h6><br>
							editorOp:{Object} 在columns

属性中配置，对该列所显示的编辑模式进行设置
							<div class="ccay-form-

body">
	                           	<ul></ul>
	                        </div>
							<div class="ccay-form-

custom">
								<ul>
									<li 

class="ccay-form-row">
		                        		<samp class="i18n" 

i18nKey="conf"></samp>
										

<span class="ccay-form-input">{Object} 设置编辑模式部门选择框的属性配置，具体配置

将在《选择组件->公共服务》中描述
											

<h5><a onclick="Ccay.Page.forward

('ccay/example/ui/commonservice/commonservice.html');">点击查看</a></h5>
										

</span>
			                		</li>
								</ul>
							</div>
						</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" 

i18nKey="hrapprover"></samp>	
						<span class="ccay-form-input">设置

该列的编辑模式是部门权签人选择框模式。<br><h6>示例:columns:[{editorOp:

{type:'hrapprover'}}];</h6><br>
							editorOp:{Object} 在columns

属性中配置，对该列所显示的编辑模式进行设置
							<div class="ccay-form-

body">
	                           	<ul></ul>
	                        </div>
							<div class="ccay-form-

custom">
								<ul>
									<li 

class="ccay-form-row">
		                        		<samp class="i18n" 

i18nKey="conf"></samp>
										

<span class="ccay-form-input">{Object} 设置编辑模式部门权签人选择框的属性配置，具

体配置将在《选择组件->公共服务》中描述
											

<h5><a onclick="Ccay.Page.forward

('ccay/example/ui/commonservice/commonservice.html');">点击查看</a></h5>
										

</span>
			                		</li>
								</ul>
							</div>
						</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" 

i18nKey="ldap"></samp>	
						<span class="ccay-form-input">设置

该列的编辑模式是用户联想框模式。<br><h6>示例:columns:[{type:'ldap', editorOp:

{multi:true, conf:{}}}];</h6><br>
							editorOp:{Object} 在columns

属性中配置，对该列所显示的编辑模式进行设置
							<div class="ccay-form-

body">
	                           	<ul></ul>
	                        </div>
							<div class="ccay-form-

custom">
								<ul>
									<li 

class="ccay-form-row">
		                        		<samp class="i18n" 

i18nKey="multi"></samp>
										

<span class="ccay-form-input">{Boolean} 设置编辑模式人员联想框是否可进行多选，默认

为false</span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" 

i18nKey="valueField"></samp>
										

<span class="ccay-form-input">{String} 设置编辑模式人员联想框的值属性，默认为

userId。可选参数有:userAccount、userId</span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" 

i18nKey="conf"></samp>
										

<span class="ccay-form-input">{Object} 设置编辑模式人员联想框的属性配置，具体配置

将在《选择组件->公共服务》中描述
											

<h5><a onclick="Ccay.Page.forward

('ccay/example/demo/ui/commonservice/commonservice.html');">点击查看</a></h5>
										

</span>
			                		</li>
								</ul>
							</div>
						</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" 

i18nKey="popup"></samp>	
						<span class="ccay-form-input">设置

该列的编辑模式是公共选择弹出框模式。<br><h6>示例:columns:[{editorOp:{type:'popup', 

conf:{}}}];</h6><br>
							editorOp:{Object} 在columns

属性中配置，对该列所显示的编辑模式进行设置
							<div class="ccay-form-

body">
	                           	<ul></ul>
	                        </div>
							<div class="ccay-form-

custom">
								<ul>
									<li 

class="ccay-form-row">
		                        		<samp class="i18n" 

i18nKey="conf"></samp>
										

<span class="ccay-form-input">{Object} 设置编辑模式通用弹出框的属性配置，具体配置

将在《容器组件->通用弹出框组件》中描述
											

<h5><a onclick="Ccay.Page.forward('ccay/example/demo/ui/dialog/popup.html');">点

击查看</a></h5>
										

</span>
			                		</li>
								</ul>
							</div>
						</span>
					</li>		
				</ul>
			</div>
			</form>
		</div><br />
		
		<h2 style="cursor: pointer;"><a onclick="Ccay.Common.toggle

(this,'#api3')">3.IGrid自定义编辑器editor属性配置表</a></h2>
		<div style="display:none" id="api3">
			<form class="init ccay-form longtitle">
			<div class="ccay-form-body ccay-form-custom">
				<ul>		
					<li class="ccay-form-row">
						<samp><h3>相关API</h3></samp>
						<span class="ccay-form-input"><h3 

style="float: left;">描述</h3><h5><a 

onclick="Ccay.example.ui.igrid.editorFunction.openDemo('tab4');">点击查看

Demo</a></h5></span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" 

i18nKey="Ccay.Editor.create(editorOps)"></samp>	
						<span class="ccay-form-input">创建

该列自定义编辑器，示例<br><h6>var editorOps = {build:function(){}...需重写的方

法};<br>columns:[{editor:Ccay.Editor.create(editorOps)}];</h6><br><br>
							根据实际情况需要重写以下方

法进行自定义，editorOps的配置重写方法如下:<br />
							<div class="ccay-form-

body">
	                           	<ul></ul>
	                        </div>
							<div class="ccay-form-

custom">
								<ul>
									<li 

class="ccay-form-row">
		                        		<samp><h3>重写方法

</h3></samp>
				                		<span 

class="ccay-form-input"><h3>描述</h3></span>
			                		</li>
									<li 

class="ccay-form-row">
		                        		<samp class="i18n" 

i18nKey="render(container, op, value)"></samp>
										

<span class="ccay-form-input">初始化编辑器<br>container：{Object} 设置编辑器的容器

对象<br>op：{Object} 列columns的editorOp属性参数<br>value：{String} 编辑之前，单元

格的值</span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" 

i18nKey="build(container, op)"></samp>
										

<span class="ccay-form-input">创建编辑器<br>container：{Object} 设置编辑器的容器对

象<br>op：{Object} 列columns的editorOp属性参数</span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" 

i18nKey="setAttr(ctr, op)"></samp>
										

<span class="ccay-form-input">设置编辑器的属性<br>ctr：{Object} 该编辑器对象<br>op

：{Object} 列columns的editorOp属性参数</span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" 

i18nKey="getValue(ctr)"></samp>
										

<span class="ccay-form-input">获取编辑器的值<br>ctr：{Object} 编辑器对象</span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" 

i18nKey="setValue(ctr, value)"></samp>
										

<span class="ccay-form-input">设置编辑器的值<br>ctr：{Object} 编辑器对象<br>value

：{String} 编辑之前，单元格的值</span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" 

i18nKey="setValid(ctr, op)"></samp>
										

<span class="ccay-form-input">设置编辑器的验证<br>ctr：{Object} 编辑器对象<br>op：

{Object} 列columns的editorOp属性参数<br></span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" 

i18nKey="valid(ctr)"></samp>
										

<span class="ccay-form-input">验证编辑器<br>ctr：{Object} 编辑器对象</span>
			                		</li>
								</ul>
							</div>
						</span>	
					</li>			
				</ul>
			</div>
			</form>
		</div>
	 </div>
	 
	 <!-- Demo区 -->
	 <div title='IGrid编辑模式' tabid='tab2'><br>
	 	<h4 id="hd1"><span onclick="Ccay.Common.toggle(this,'#demo1')" 

style="cursor:pointer;">实例1:IGrid开启/关闭编辑模式</span></h4>
	 	<div id="demo1" style="display: none;">
	 		<span class="showClew">备注:1.IGrid开启编辑模式Demo，当前用

户有"enumManagement:update"的权限，并且editMode:true时，可直接点击单元格进行数据编

辑
	 		<br>2.当前用户没有"enumManagement:update"的权限时，则不可进

行数据编辑</span><br /><br />
	 		<div id="iStudent1"></div>
	 		<h3>html Code</h3>
	  		<span></span>
	  		<div class="codeArea">
	  			<pre id='html1'>&lt;div 

id="igridDemo1">&lt;/div></pre>
	  		</div>
	  		<h3>js Code</h3>
      		<span></span>
      		<div class="codeArea">
      			<pre id='js1'>
var gridParam1 = {
	height: 130,
	
	//<span class="showClew"> 设置igrid的编辑权限，没有该权限则不可编辑</span>
	editPermission: "enumManagement:update",
	
	//<span class="showClew"> editMode: true 开启编辑模式；editMode: false 关闭编辑模式；默认为false </span>
	editMode: true,
	showPager: false,
	columns: [
	 {field: 'name', width:100, header: "string"},
	 {field: 'sex', width:70, header: "bool", type: 'bool'},
	 {field: 'age', width:90, header: "integer", type: 'integer'},
	 {field: 'tuition', width:100, header: "currency", type: 'currency', format:{fraction:2, flag:'￥[currency]'}},
	 {field: 'birthday', width:100, header: "date", type: 'date'},
	 {field: 'province', width:100, header: "lookup", type: 'lookup', format: {supportLang: true, code: "province"}},
	 {field: 'blog', width:140, header: "textarea", type: 'textarea'}
    ],
	ajax:{
	   	url: 'services/ccay/demo/student/list/page/${pageSize}/${curPage}/${orderBy}'
	}
};

$("#igridDemo1").igrid(gridParam1);
      			</pre>
      		</div>
      		<div class="try">
				<a  onclick="Ccay.example.openTry

('#editorFunctionDemo',$('#js1').html(),$('#html1').html())">亲自试一试</a>
			</div>
	 	</div>
	 	
	 	<h4 id="hd2"><span onclick="Ccay.Common.toggle(this,'#demo2')" 

style="cursor:pointer;">实例2:IGrid新增编辑模式</span></h4>
	 	<div id="demo2" style="display: none;">
	 		<span class="showClew">备注:IGrid新增编辑模式Demo，点击单元

格不可进行数据编辑，只有点击新增按钮，新增加的行可进行数据编辑</span><br /><br />
	 		<!--表格数据操作区域-->
			<div class="ccay-grid-toolbar">
				<span id="btnAdd" class="ccay-button" >
					<a class="ccay-icon add"></a>
					<label>insert</label>
				</span>
			</div>
	 		<div id="iStudent2"></div>
	 		<h3>html Code</h3>
	  		<span></span>
	  		<div class="codeArea">
	  			<pre id='html2'>
&lt!--表格数据操作区域-->
&lt;div class="ccay-grid-toolbar">
	&lt!--新增按钮-->
	&lt;input id="btnGridAdd" value='insert' type=button />
&lt;/div>

&lt;!-- 提供div供igrid进行初始化 -->
&lt;div id="igridDemo2">&lt;/div>
	  			</pre>
	  		</div>
	  		<h3>js Code</h3>
      		<span></span>
      		<div class="codeArea">
      			<pre id='js2'>
var gridParam2 = {
	height: 130,
	
	//<span class="showClew"> editMode: "insert" 开启新增编辑模式</span>
	editMode: "insert",
	showPager: false,
	columns: [
	 {field: 'name', width:70, header: "string"},
	 {field: 'sex', width:60, header: "bool", type: 'bool'},
	 {field: 'age', width:70, header: "integer", type: 'integer'},
	 {field: 'tuition', width:80, header: "currency", type: 'currency', format:{fraction:2, flag:'￥[currency]'}},
	 {field: 'birthday', width:100, header: "date", type: 'date'},
	 {field: 'province', width:100, header: "lookup", type: 'lookup', format: {supportLang: true, code: "province"}},
	 {field: 'blog', width:140, header: "textarea", type: 'textarea'}
    ],
	ajax:{
	   	url: 'services/ccay/demo/student/list/page/${pageSize}/${curPage}/${orderBy}'
	},
	operation:{
	    insert:{
	    	//<span class="showClew"> btn设置新增按钮</span>
    		btn:'#btnGridAdd',
    		
    		//<span class="showClew">// defaultRow:指定添加的数据，其属性对应columns的field值</span>
    		defaultRow:{sex: 1, blog:'http://'}
		}
	}
};

$("#igridDemo2").igrid(gridParam2);
      			</pre>
      		</div>
      		<div class="try">
				<a  onclick="Ccay.example.openTry

('#editorFunctionDemo',$('#js2').html(),$('#html2').html())">亲自试一试</a>
			</div>
	 	</div>
	 	
	 	<h4 id="hd3"><span onclick="Ccay.Common.toggle(this,'#demo3')" 

style="cursor:pointer;">实例3:IGrid开启行编辑模式</span></h4>
	 	<div id="demo3" style="display: none;">
	 		<span class="showClew">备注:IGrid开启行编辑模式Demo，点击单

元格即可对整行进行编辑</span><br /><br />
	 		<div id="iStudent3"></div>
	 		<h3>html Code</h3>
	  		<span></span>
	  		<div class="codeArea">
	  			<pre id='html3'>&lt;div 

id="igridDemo3">&lt;/div></pre>
	  		</div>
	  		<h3>js Code</h3>
      		<span></span>
      		<div class="codeArea">
      			<pre id='js3'>
var gridParam3 = {
	height: 130,
	
	//<span class="showClew"> editMode: true 开启编辑模式并且rowEdit: true 才可开启行编辑模式，默认为false</span>
	editMode: true,
	rowEdit: true,
	showPager: false,
	columns: [
	 {field: 'name', width:100, header: "string"},
	 {field: 'sex', width:70, header: "bool", type: 'bool'},
	 {field: 'age', width:90, header: "integer", type: 'integer'},
	 {field: 'tuition', width:100, header: "currency", type: 'currency', format:{fraction:2, flag:'￥[currency]'}},
	 {field: 'birthday', width:100, header: "date", type: 'date'},
	 {field: 'province', width:100, header: "lookup", type: 'lookup', format: {supportLang: true, code: "province"}},
	 {field: 'blog', width:140, header: "textarea", type: 'textarea'}
    ],
	ajax:{
	   	url: 'services/ccay/demo/student/list/page/${pageSize}/${curPage}/${orderBy}'
	}
};

$("#igridDemo3").igrid(gridParam3);
      			</pre>
      		</div>
      		<div class="try">
				<a  onclick="Ccay.example.openTry

('#editorFunctionDemo',$('#js3').html(),$('#html3').html())">亲自试一试</a>
			</div>
	 	</div>
	 	
	 	<h4 id="hd4"><span onclick="Ccay.Common.toggle(this,'#demo4')" 

style="cursor:pointer;">实例4:IGrid联动(级联)编辑模式</span></h4>
	 	<div id="demo4" style="display: none;">
	 		<span class="showClew">备注:IGrid联动(级联)编辑模式Demo，点

击单元格即可对与该单元格绑定的其他单元格同时进行编辑，并可进行级联选择</span><br 

/><br />
	 		<div id="iStudent4"></div>
	 		<h3>html Code</h3>
	  		<span></span>
	  		<div class="codeArea">
	  			<pre id='html4'>&lt;div 

id="igridDemo4">&lt;/div></pre>
	  		</div>
	  		<h3>js Code</h3>
      		<span></span>
      		<div class="codeArea">
      			<pre id='js4'>
// 第一级联想框					
var connectorOp3 = {
	valueField:"i18nKey",
	displayField:'i18nKey',
	fieldMapper: {
       i18nKey: $i18n("ccay.i18n.label.key")
    },
	queryParam:function(){
	  return {"i18nKey":$('#suggest_trigger').val()}
	},
	url:"services/manage/i18n/list/page/80/1"
};

// 第二级联想框	    
var connectorOp4= {
	valueField:"i18nKey",
	displayField:'i18nContent',
	lazyload: false,
	fieldMapper: {
       i18nContent: $i18n("ccay.i18n.label.content")
    },
	ajax:{
   	 	url:"services/manage/i18n/list/page/80/1?${connect}"
    },
    connector:[
 				

{target:"#suggestProvince3",paramName:"i18nKey",defaultValue:""}
	]
};      			
var gridParam4 = {
	height: 130,
	editMode: true,
	showPager: false,
	columns: [
	 {field: 'name', width:100, header: "sName"},
	 
	 //<span class="showClew"> id: "comboProvince"设置该单元格编辑器的ID值；afterTrigger:["city"]设置该列进行联动的其他列，其值为联动列的field属性值 </span>
	 {field: 'province', width:150, header: "sProvince(combox)", type: 'enum', 
	 	editorOp: {id: "comboProvince", afterTrigger: ["city"]}, format: 

{service:"REST:services/ccay/demo/address/listAllProvinces",valueField: "provinceId", displayField: "provinceName"}},
	 
	 //<span class="showClew"> trigger: ["province", "name"]设置联动之后显示的编辑器； connector:"#comboProvince"设置该列级联的父级，其值为父级单元格编辑器的ID值； lazyload: false延迟加载数据；ajax: {url:''}设置联动加载的子数据</span>
	 {field: 'address', valueField: 'city', width:150, header: "sCity", type: 'enum', 
	 	editorOp: {trigger: ["province", "name"], conf: {connector: "#comboProvince", lazyload: false, ajax: 

{url:'services/ccay/demo/address/listCitiesByProvincesId/{0}'}}}, format: {valueField: "cityId", displayField: "cityName"}},
	{field: 'attr3', width:150, header: "i18nKey(suggest)", type: 'suggest', 

editorOp: {id: "suggestProvince3", afterTrigger: ["attr4"], conf: connectorOp3}},
	{field: 'attr4', width:150, header: "i18nContent", type: 'suggest', editorOp: { conf: connectorOp4,trigger: ["attr3"]}}	 	
	],
	ajax:{
		url: 'services/ccay/demo/student/list/page/${pageSize}/${curPage}/${orderBy}'
	}
};
		
$("#igridDemo4").igrid(gridParam4);
      			</pre>
      		</div>
      		<div class="try">
				<a  onclick="Ccay.example.openTry

('#editorFunctionDemo',$('#js4').html(),$('#html4').html())">亲自试一试</a>
			</div>
	 	</div>
	 	
	 </div>
	 
	 <div title='IGrid内置编辑器功能' tabid='tab3'>
	 	<span class="showClew">备注:IGrid内置编辑器功能Demo介绍内置的18种编

辑器类型，默认为文本框类型</span><br /><br />
	 	<div id="iStudent5"></div>
	 	<h3>html Code</h3>
	  	<span></span>
	  	<div class="codeArea">
	  		<pre id='html5'>&lt;div id="igridDemo5">&lt;/div></pre>
	  	</div>
	  	<h3>js Code</h3>
      	<span></span>
      	<div class="codeArea">
      		<pre id='js5'>
//<span class="showClew"> type: 'suggest'联想框参数设置</span>
var suggestOps = {
	multi: true,
	url: "services/ccay/demo/student/list/page/${suggestNum}/1",
	valueField: "id",
	displayField: "name",
	fieldMapper: {
		name: "sName",
		sex: "sSex",
		address: "sAddress"
	}
};

//<span class="showClew"> type: 'popup'弹出框参数设置</span>
//<span class="spanShow"> 备注（带有查询条件）:1.需要设置参数:queryParam,例如:queryParam : '{status:1}'；2.同时，需要修改field 中type 为:type : "popupProgramInfo"</span>
var popupOps = {
	//<span class="showClew"> igrid: true指定弹出框显示类型是igrid，默认为gtgrid</span>
	igrid: true,
	multiSelect: true,
	servicePath: "services/ccay/demo/student/list",
	uniqueKey: "id",
	displayField: "name",
	columns: [
		{header: "sName", id: 'name'},
		{header: "sSex", id: 'sex'},
		{header: "sAddress", id: 'address'}
	]
};

//----------
var columns1 = [ {
	header : $i18n("ccay.security.label.roleName"),
	id : 'name',
	isCondition : true
	}, {
	header : $i18n("ccay.common.label.description"),
	id : 'id',
	isCondition : true
	} ];

var Usert1 = {
	suggestOp : {
	    url : "services/ccay/demo/student/list/page/${suggestNum}/1",
		fieldMapper : {
			age : "Age",
			name : $i18n("ccay.common.label.description")
		}
	},
	popOp : {
		servicePath: "services/ccay/demo/student/list",
		uniqueKey : "name",
		columns : columns1,
		title : $i18n("ccay.registry.label.popupTitle")
	},
	 displayField : "name",
	 valueField : "name"
}
//-------
		
		
var gridParam5 = {
	height: 330,
	wrap: true,
	editMode: true,
	showPager: false,
    columns: [   
	{field: 'name', width:100, header: "text(default)"},
	{field: 'attr3', width:110, header: "ldap", type: 'ldap', editorOp: {conf: 

{multi: true}}},
	{field: 'name', valueField: "id", width:100, header: "suggest", renderer: 

'enum', editorOp: {type: "suggest", conf: suggestOps}},
	{field: 'attr4', width:110, header: "hrdept", renderer: 'enum', editorOp: 

{type: 'hrdept'}},
	{field: 'attr5', width:110, header: "hrapprover", renderer: 'enum', 

editorOp: {type: 'hrapprover'}},
	 //<font style="color:red;">联想弹出框。</font>
	{field : 'mail',width : 150,header : "Compopup",type:"popbox",editorOp:

{conf:Usert1}},
	{field: 'sex', width:70, header: "bool", type: 'bool'},
	{field: 'birthdayEnd', width:90, header: "dateym", type: 'dateym'},
	{field: 'birthday', width:90, header: "date", type: 'date'},
	{field: 'lastUpdateDate', width:120, header: "datetime", type: 

'datetime',content: "${#getLastTime(lastUpdateDate)}"},
	{field: 'province', width:100, header: "lookup", type: 'lookup', format: 

{supportLang: true, code: "province"}, rule: {required: true}},
	{field: 'card', width:140, header: "combobox/enum", type: 'enum', editorOp: 

{conf:{multi: true}}, format: {service: 'FN:Ccay.example.ui.igrid.editorFunction.provinceData', cacheKey: "render_provinceData", valueField: "pCode", displayField: "pName"}},
	{field: 'blog', width:135, header: "textarea", renderer: "longtext", format: {height: "50px"}, editorOp:{type: 'textarea', width:"50px", height:"50px"}},
	/** 
	 * 国家，只需要数据库中一个字段来存储
	 **/
 	{field: "country",width:110, header: "country", type: 'country'},
	
	/**	
	 * 公司，需要对应数据库中两个字段
	 * 需要设定valueField：保存value的字段；field：用于显示的字段
	 * */
	 {field: "companyName",valueField:"companyCode",width:110, header: 

"company", type: 'company'},
	/**
	 * 货币，只需要数据库中一个字段来存储
	 * */
	 {field: "currency",width:110, header: "Currency", type: 'iCurrency'},
	/**	
	 * 片区代办，需要对应数据库中两个字段
	 * 需要设定valueField：保存value的字段；field：用于显示的字段
	 * 设置format中的areaLabel为按不同类型划分片区,值可以

是"JCR""Region""Office""Rep. Office"
	 * */
	 {field: "areaName",valueField:"areaCode",width:110, header: "area", type: 

'area',format:{areaLabel:"Region"}},
	/**
	 * 行政区划分，只需要数据库中一个字段来存储locationName，
	 * 此处包含级联查询，level：级联等级number，1级联等级最高，2其次，类推。

connector：级联字段
	 * 此处需要做联动，防止查询错误。
	 * */
	 {field: 'location',width:110, header: "location", type: 

'location',format:{level:1},editorOp: {afterTrigger: ["attr1", "attr2"]}},
	 {field: 'attr1',width:110, header: "location(1)", type: 

'location',format:{level:2,connector:"#location"},editorOp: {trigger: 

["location"],afterTrigger: ["attr2"]}},
	 {field: 'attr2',width:110, header: "location(2)", type: 

'location',format:{level:3,connector:"#attr1"},editorOp: {trigger: ["location", 

"attr1"]}},
	/**
	 * PBI,数据库中一个字段用来保存整个对象
	 * readonly:boolean,是否只读
	 */
	{field: "pbi",width:110, header: "pbi", type: 'pbi',format:

{readonly:false}},
	{field: 'money', width:110, header: "money", type: 'money', editorOp: 

{currencyCodeName:"currencycode",exchangeDateName:"exchangedate",amountName:"amount"}}
    ],
	ajax:{
	   	url: 'services/ccay/demo/student/list/page/15/1/${orderBy}'
	}
};
		

$("#igridDemo5").igrid(gridParam5);
      		</pre>
      	</div>
      	<div class="try">
			<a onclick="Ccay.example.openTry('#editorFunctionDemo',

$('#js5').html(),$('#html5').html())">亲自试一试</a>
		</div>
	 </div>
	 
	 <div title='IGrid自定义编辑器功能' tabid='tab4'>
	 	<span class="showClew">备注:IGrid自定义编辑器功能Demo，通用下拉框模

式和自定义select下拉框模式对比</span><br /><br />
	 	<div id="iStudent6"></div>
	 	<h3>html Code</h3>
	  	<span></span>
	  	<div class="codeArea">
	  		<pre id='html6'>&lt;div id="igridDemo6">&lt;/div></pre>
	  	</div>
	  	<h3>js Code</h3>
      	<span></span>
      	<div class="codeArea">
      		<pre id='js6'>
//<span class="showClew"> 自定义编辑器的数据来源</span>     		
page.classData = [
	{value: 1, text: "一班"},
	{value: 2, text: "二班"},
	{value: 3, text: "三班"},
	{value: 4, text: "四班"},
	{value: 5, text: "五班"},
	{value: 6, text: "六班"},
	{value: 7, text: "七班"},
	{value: 8, text: "八班"},
	{value: 9, text: "九班"},
	{value: 10, text: "十班"}
];

//<span class="showClew"> 自定义编辑器参数配置</span> 
var editorOps = {
	//<span class="showClew"> 创建自定义编辑器</span> 
	build: function(container, op){
		var ctr = $.create("SELECT","ccay-editor-select").appendTo(container);
		var service = op.data;
		if($.isArray(service)){
			for(var i=0; i&lt;service.length; i++){
				ctr.append("&lt;option value='{0}'>{1}&lt;/option>".format(service[i].value, service[i].text));
			}
		}
		return ctr;
	},
	
	//<span class="showClew"> 获取自定义编辑器的值</span> 
	getValue: function (ctr) {
		var valueObj = {
			value: ctr.val() || "",
			text: ctr.find("option:selected").html() || ""
		};
		return valueObj;
	},
	
	//<span class="showClew"> 设置自定义编辑器的值</span> 
	setValue: function (ctr, valueObj) {
		ctr.val(valueObj.value);
	}
};

var gridParam6 = {
	height: 130,
	editMode: true,
	showPager: false,
	allowSort: false,
	columns: [
		{field: 'grade', width:120, header: "sGrade(normal)", type: 'enum', format: {data: page.classData}},
		
		//<span class="showClew"> editorOp: {data: page.classData, cssName: "grid-editor"}设置自定义编辑器数据来源及样式；editor: Ccay.Editor.create(editorOps)设置自定义编辑器</span> 
		{field: 'classes', width:120, header: "sClass(editor)", type: 'enum', format: {data: page.classData}, editorOp: {data: page.classData, cssName: "grid-editor"}, editor: Ccay.Editor.create(editorOps)}
	],
	ajax:{
	   	url: 'services/ccay/demo/student/list/page/${pageSize}/${curPage}/${orderBy}'
	}
};

$("#igridDemo6").igrid(gridParam6);
      		</pre>
      	</div>
      	<div class="try">
			<a onclick="Ccay.example.openTry('#editorFunctionDemo',

$('#js6').html(),$('#html6').html())">亲自试一试</a>
		</div>
	 </div>
	 
	 <!-- Try区 -->
	 <div title="试一试" tabid="trytab" >
	    <fieldset class='ccay-demo'>
	    <legend ><h2>代码区</h2></legend>
		   
		   <span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果  —

———></span><input value="try it yourself" type="button" 

onclick="Ccay.example.runDemo()" /> 

				<div>
				    <table  style="width:100%;">
				      <tr>
				        <td style="width:100%;">
						<h3>js Code:</h3>	
						  <!-- 高度按需来调整。默认最小应为

100px -->					
	                      <textarea id="jsTxt" 

style="height:200px;width:99%;"></textarea>
	                    </td>   
	                  </tr>
	                  <tr>
	                    <td style="width:100%;">
						<h3>html Code:</h3>
						  <!-- 高度按需来调整。默认最小应为

100px -->
	                      <textarea id="htmlTxt" 

style="height:100px;width:99%;"></textarea>
	                    </td>
	                  </tr> 
                    </table>
				</div>
           </fieldset>
        <fieldset class='ccay-demo'>
          <legend ><h2>结果区</h2></legend>
			<div>
				<div style="overflow:auto;" 

id="demoMainPanel"></div>
			</div>
        </fieldset>
     </div>
	 
	 <!-- FAQ区 -->
	 <div title="FAQ">
		  <form class="init ccay-form">
		    <div class="ccay-form-body">
		    <ul>
		    	<li class="ccay-form-row">
			      <samp><h3>问题</h3></samp>
			      <span class="ccay-form-input">
			               <h3>解决方案</h3>
			      </span>
			    </li>
		    </ul>
			</div>     
			<div class="ccay-form-custom">
			    <ul>                     
			        <!-- 若问题和内容较多，可在li中的class加上ccay-

form-whole -->
			    
			        <li class="ccay-form-row ccay-form-whole">
			                          <samp class="i18n" 

i18nKey="&nbsp;igrid&nbsp;编辑模式是弹出框时，可以拿到同行其他列的值作为弹出框的查

询参数 " title="igrid编辑模式是弹出框时，可以拿到同行其他列的值作为弹出框的查询参数

"></samp>                          
			                         <span class="ccay-form-input">例

如：以sex列的值作为弹出框的查询参数<br/>弹出框配置：servicePath: 

"services/ccay/demo/student/list<font color="red">?sex=${sex}</font>",</span>
			        </li>  
			            <li class="ccay-form-row ccay-form-whole">
			                          <samp class="i18n" i18nKey=" 

&nbsp;igrid&nbsp;列表下的popup控件，在弹出框中选择行数据时，重新赋值给igrid " 

title="igrid列表下的popup控件，在弹出框中选择行数据时，重新赋值给igrid "></samp>    

                      
			                         <span class="ccay-form-input">单

行：<br/>
			                <pre>     弹出框配置：给弹出框配置回调函数

callback<br/>//record是弹出框传来的数据<br/><font 

color="red">callback</font>:function(<font color="green">record</font>){
	//获取当前igrid
	var <font color="red">igrid</font> = $('#igridID').manager();
	//当前行对象
	var <font color="red">row</font> = igrid.getFocusRow();
	//行数据
	var <font color="red">rowData</font> = igrid.getRowData(row);
	//把弹出框name列的值，赋值给igrid的blog列。
	//也就是说给igrid的blog列重新赋值，他的值是弹出框name列的值。
	<font color="red">rowData.blog</font> = <font 

color="green">record.name</font>;
	......//多列，同上行
	//这时，值已经传过来了，渲染一下ok
	igrid.renderRow(<font color="red">row</font>,<font 

color="red">rowData</font>);
}
</pre><br/>多行：<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;参考：<a href="#" >igrid列表下的popup控件弹出框中，自动生成的多行popup控件，

选择多行数据时，赋值不过去 </a></span>
			        </li>  
			    </ul>
			</div>
		  </form>                    
    </div> 
	 
</div>